<template>
    <div class="footer fcb">
        <div class="footerleft">
            <div class="lefttop">
                <div class="topText">
                    <span class="textLogo">bituse.pro</span>
                    <span class="textT"
                        v-text="Lang.bottomLeft[lang]"></span>
                </div>
                <div class="topImg">
                    <div class="imgcon conFace cur animation"
                        @click="e_page('invite')"></div>
                    <div class="imgcon conTwi cur animation"
                        @click="e_openqq()"></div>
                    <div class="imgcon conWechat cur animation"
                        @mouseenter="changeView('showWechatImg', true)"
                        @mouseleave="changeView('showWechatImg', false)" />
                    <div class="qrcon"
                        v-show="showWechatImg">
                        <img src="./images/qr_wechat.60cf29c.jpg">
                    </div>
                </div>
            </div>
            <div class="leftbottom">
                <span>© 2018-2028 bituse.PRO</span>
            </div>
        </div>
        <div class="footerright">
            <div class="rightcontainer"
                v-for="(v, index) in Lang.links"
                :key="index">
                <h6 class="serviceTitle"
                    v-text="v.title[lang]"></h6>
                <ul class="rightUl"
                    v-for="(value, index) in v.child[lang]"
                    :key="index">
                    <li class="serviceText cur animation"
                        v-text="value.txt"
                        :data-link="value.link"
						 @click="e_page_(value)"/>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import Lang from './lang.js'
import {bus} from '../../../main'
export default {
	name: 'Cfooter',
	data() {
		return {
			Lang,
			langSelects: [{value: 0, txt: '简体中文'}, {value: 1, txt: 'English'}],
			showWechatImg: false,
		}
	},
	computed: {
		lang() {
			return this.$store.state.setting.lang
		},
	},
	methods: {
		changeView(which, b) {
			this[which] = b
		},
		e_page_(event) {

			let da = event.link
			let date = event.noticeType
			let linkType = event.type

			if (da === undefined) {
				return false
			}

			//公告的类型/文章的id
			if (linkType == 1) {
				//bus.$emit('noticeType', date)
				if (
					window.location.href.indexOf('bulletin/read') == -1 &&
					window.location.href.indexOf('bulletin') != -1
				) {
					bus.$emit('noticeType', date)
				} else {
					this.$store.commit('set_notice_noticeType', date)
					this.$router.push('/' + da)
				}
				
			} else {
				//bus.$emit('which', date)
				if (window.location.href.indexOf('bulletin/read') == -1) {
					this.$store.commit('set_notice_which', date)
					//路由跳转
					this.$router.push('/' + da)
				}else{
					bus.$emit('which', date)
				}
			}

			//路由跳转
			this.$router.push('/' + da)
		},
		e_page(s) {
			this.$router.push(`/${s}`)
		},
		e_openqq() {
			// window.open(
			// 	'//shang.qq.com/wpa/qunwpa?idkey=1c0778545df3c70c119a2bbeebad20b902f2066f1c7c13f310b21c59b8eaabc1',
			// )
		},
	},
}
</script>

<style scoped>
.footer {
	width: 100%;
	min-width: 1200px;
	height: 330px;
	background-color: #181b2a;
}
.footerleft {
	width: 297px;
	height: 270px;
	margin-left: 113px;
}
.lefttop {
	width: 100%;
	height: 150px;
}
.topText {
	width: 100%;
	height: 75px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.textLogo {
	font-size: 22px;
	color: #c7cce6;
	margin-bottom: 8px;
}
.textT {
	color: #c7cce6;
}
.topImg {
	width: 100%;
	height: 35px;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	position: relative;
}
.qrcon {
	width: 110px;
	height: 110px;
	background-color: #61688a;
	position: absolute;
	top: 32px;
	left: 40px;
	border-radius: 3px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.qrcon img {
	width: 100px;
	height: 100px;
}
.imgcon {
	width: 25px;
	height: 25px;
	background-color: #61688a;
	border-radius: 50%;
	background-repeat: no-repeat;
	margin-right: 15px;
}
.imgcon:hover {
	background-color: #6780d0;
}
.conFace {
	background-image: url('./images/share.png');
	background-position: 24% 54%;
}
.conTwi {
	background-image: url('./images/qq.png');
	background-position: 40% 40%;
}
.conWechat {
	background-image: url('./images/wechat.png');
	background-position: 40% 40%;
}
.leftbottom {
	width: 100%;
	height: 50px;
	font-size: 16px;
	color: #61688a;
}

.footerright {
	width: 650px;
	height: 270px;
	/* background-color: aquamarine; */
	margin-right: 25px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.rightcontainer {
	width: 140px;
	height: 100%;
	/* background-color: antiquewhite; */
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}
.serviceTitle {
	color: #61688a;
	font-size: 14px;
	display: inline-block;
	margin-top: 20px;
	margin-bottom: 15px;
}
.serviceText {
	color: #c7cce6;
	font-size: 16px;
	display: inline-block;
	margin-bottom: 8px;
}

.serviceText:hover {
	color: #7794f0;
}
.rightUl {
	display: flex;
	flex-direction: column;
}
</style>


